import React, { useState, useRef } from "react";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import configureStore from "./stores/rootStore";
import { SnackbarProvider } from "notistack";

import Routes from "./Routes";

import "./styles/base.scss";

const store = configureStore();

function App() {
  const [isThemeDark, setIsThemeDark] = useState(false);
  const themeRef = useRef(isThemeDark);
  // useEffect(() => {
  //   const listen = window.addEventListener("storage", () => {
  //     console.log(themeRef.current, isThemeDark);
  //     console.log(localStorage.getItem("theme"));
  //     if (localStorage.getItem("theme") === "dark") {
  //       setIsThemeDark(true);
  //       themeRef.current = true;
  //       console.log(themeRef.current);
  //     } else {
  //       setIsThemeDark(false);
  //       themeRef.current = false;
  //     }
  //   });
  //   return () => window.removeEventListener("storage", () => null);
  // }, []);
  // themeRef.current ? darkMuiTheme : lightMuiTheme
  return (
    <Provider store={store}>
      <SnackbarProvider
        anchorOrigin={{
          vertical: "top",
          horizontal: "center",
        }}
        classes={{
          variantError: "text-danger",
        }}
      >
        <BrowserRouter>
          <Routes />
        </BrowserRouter>
      </SnackbarProvider>
    </Provider>
  );
}

export default App;
